<template>
  <view class="container">


    <!--轮播图-->
    <view style="z-index: 1;">
      <u-swiper :list="bannerList" @click="clickSwiperHandle" height="200" radius="0"></u-swiper>
    </view>
    <view style="margin-top: -15px;">
      <view class="bottom">
        <!-- 卡片 -->
        <view v-for="(project,index) in projectList" :key="index" style="display: flex;justify-content: center;">
          <view class="card" style="margin-top: 10px;">
            <!-- 图片 -->
            <view style="padding-left: 20upx;">
              <img :src="project.mainImageUrl" style="height: 160upx;width: 180upx;border-radius: 10upx;">
            </view>
            <!-- 名字 -->
            <view style="padding-left: 20upx;width: 350upx;">
              <view style="font-size: 40upx;font-weight: bold;">
                {{project.name}}
              </view>
              <view style="padding-top: 20upx;color: #AFB6B8;font-size: 25upx;">
                {{project.introduce}}
              </view>
              <view style="display: flex;justify-content: space-between;padding-top: 10upx; ">
                <view style="display: flex">
                  <view style="color: red;font-size: 40upx;font-weight: bold">
                    {{'￥' + project.originalPrice}}
                  </view>
                  <view style="display: flex;align-items: flex-end;">
                    <view style="color: #AFB6B8;font-size: 20upx;text-decoration: line-through">
                      {{'￥' + project.discountPrice}}
                    </view>
                  </view>
                </view>
                <view style="display: flex;align-items: center;">
                  <view style="font-size: 25upx;">
                    {{project.serviceDuration + '分钟'}}
                  </view>
                </view>
              </view>
            </view>
            <!-- 按钮 -->
            <view style="display: flex;align-items: center;padding-right: 20upx;">
              <view style="width: 170upx;height: 20upx;display: flex;align-items: center">
                <u-button color="linear-gradient(to right, #119FAF, #41C69E)" shape="circle" @click="routeTo('/pages/technician/index')">选择技师</u-button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getBannerList
  } from '../../api/banner'
  import {
    getProjectList
  } from '../../api/project'
  export default {
    components: {},
    onReady() {
      let _this = this;
      uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
        success(res) { //成功回调函数
          let wHeight = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
          let titleH = uni.createSelectorQuery().select(".top-hight"); //想要获取高度的元素名（class/id）
          titleH.boundingClientRect(data => {
            _this.scrollHeight = wHeight - 200 + 15 //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
          }).exec()
        }
      })
    },
    data() {
      return {
        scrollHeight: null,
        bannerList: [],
        projectList: []
      }
    },
    onLoad() {
      this.loadBannerData()
      this.loadProjectData()
    },
    methods: {
      routeTo(url){
        uni.$u.route(url)
      },
      loadProjectData() {
        getProjectList().then(res => {
          this.projectList = res.data
        })
      },
      scrolltolower() {

      },
      clickSwiperHandle(val) {
        uni.$u.route('/pages/login/social')
      },
      loadBannerData() {
        getBannerList().then(res => {
          this.bannerList = res.data
        })
      },
      handleSearchClick(e) {
        uni.$u.route('/pages/search/search')
      }
    },
    computed: {}
  }
</script>

<style lang="scss" scoped>
  html {
    background-color: gray;
  }

  .search-wrap {
    background: $custom-bg-color;
    padding: 20rpx;
  }

  .grid-title {
    line-height: 50rpx;
    font-size: 26rpx;
  }

  .bottom {
    position: relative;
    padding-bottom: 20upx;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-color: #F8F8F8;
  }

  .card {
    width: 95%;
    padding-bottom: 30upx;
    padding-top: 30upx;
    display: flex;
    border-radius: 10px;
    background-color: #fff;
  }
</style>
